<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
  1.我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?
     - 但是我们可以通过JavaScript来修改<title>的内容.window.document.title = '新的标题'.
  2.那么在Vue项目中，普通的修改方式:
     - 通过created()生命周期函数, 在每个组件.vue文件里执行对应的代码进行修改即可.
     - 当组件被创建时，会回调created生命周期函数
      created() {
        document.title='首页'
      }
  3.但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).使用导航守卫即可.
     - vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.
     - vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.
     - 导航钩子的三个参数解析: 钩子函数也是回调函数
          to: 即将要进入的目标的路由对象.
          from: 当前导航即将要离开的路由对象. 从from跳转到to
          next: 调用该方法后, 才能进入下一个钩子.
         matched[0]:如果有配置子路由，那么就取第一个父路由
     - beforeEach函数：前置钩子，也叫前置守卫（guard），马上跳转之前触发，跳转之前就把title改变了
        router.beforeEach((to,from,next) => {
        document.title=to.matched[0].meta.title
        next()
      })
    - afterEach函数：后置钩子（hook），也叫后置守卫跳转之后回调
      如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.
   4.上面我们使用的导航守卫, 被称之为全局守卫.


-->
</body>
</html>